<template>
  <view class="page">
    <view class="page-hd">请选择租户</view>
    <view class="page-bd">
      <view class="ui-button"
        :class="{ 'active': active == item.id, 'button-function--active': active == item.id, 'button-style--default': active != item.id }"
        v-for="item in companyList" :key="item.id" @click="() => (active = item.id)">{{ item.name
        }}<view class="icon iconfont icon-a-32_32_fill_check"></view>
      </view>
    </view>
    <view class="page-ft">
      <view class="ui-button button-style--primary button-size--large" @tap="handleConfirm">{{ $t('common.queding') }}
      </view>
    </view>
  </view>
</template>

<script setup>
const companyList = [{
  id: 1,
  name: '北京鼎雄科技有限公司'
}, {
  id: 2,
  name: '怡东(北京)商务咨询有限公司'
}, {
  id: 3,
  name: '东管电力科技集团有限公司'
}];

const active = ref(2);

const handleConfirm = () => {
  console.log('confirm', active.value);
}
</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";

.page {
  background-color: #fff;
  padding-top: 92rpx;
  width: 654rpx;
  margin: 0 auto;

  &-hd {
    font-size: 40rpx;
    font-weight: 500;
    line-height: 68rpx;
  }

  &-bd {
    padding: 40rpx 0;
    display: flex;
    flex-direction: column;
    gap: 24rpx;

    .icon {
      visibility: hidden;
    }

    .ui-button {
      font-size: 30rpx;
      font-weight: 400;
      display: flex;
      justify-content: space-between;

      &.active {
        .icon {
          visibility: visible;
        }
      }
    }
  }
}
</style>
